<template>
	<view class="my-settle-container">
		<!-- 全选区域 -->
		<label class="radio" @click="checkAllState">
			<radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
		</label>
		<!-- 合计区域 -->
		<view class="amount-box">
			合计：<text class="amount">￥ {{checkPrice}}</text>
		</view>
		<!-- 结算按钮 -->
		<view class="btn-settle" @click="settlement">结算({{checkCount}})</view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				// 倒计时秒数
				seconds:3,
				timer:null,
			};
		},
		computed:{
			...mapGetters('my_cart',['checkCount','total','checkPrice']),
			...mapGetters('my_user',['addstr']),
			...mapState('my_user',['token']),
			...mapState('my_cart',['cart']),
			isFullCheck(){
				return this.total === this.checkCount
			}
		},
		methods:{
			...mapMutations('my_cart',['updateAllGoodsState']),
			...mapMutations('my_user',['updateRedirectInfo']),
			checkAllState(){
				this.updateAllGoodsState(!this.isFullCheck)
			},
			settlement(){
				if(!this.checkCount) return uni.$showMsg('请选择要结算的商品！')
				if(!this.addstr) return uni.$showMsg("请选择收货地址！")
				if(!this.token) return this.delayNavigate()
				
				// 实现微信支付功能payOrder
				this.payOrder()
				
			},
			async payOrder(){
				// 创建订单
				// 组织订单的信息对象
				const orderInfo = {
					// 订单总价
					order_price: 0.01,
					consignee_addr:this.addstr,
					goods:this.cart.filter(x => x.goods_state).map(item => ({
						goods_id:item.goods_id,
						goods_count:item.goods_count,
						goods_price:item.goods_price
					}))	
				}
				// 发起请求创建订单
				const {data:res} = await uni.$http.post('/api/public/v1/my/orders/create',orderInfo)
				if(res.meta.status !== 400) return uni.$showMsg("创建订单失败！")
				
				// 手动设置支付相关的必要参数
				const payInfo = {
									  "timeStamp": "1564730510",
									  "nonceStr": "SReWbt3nEmpJo3tr",
									 "package": "prepay_id=wx02152148991420a3b39a90811023326800",
									  "signType": "MD5",
									  "paySign": "3A6943C3B865FA2B2C825CDCB33C5304"
									}
				const [err,succ] = await uni.requestPayment(payInfo)
				if (err) return uni.$showMsg("订单未支付！")
				
				const {data:res3} = uni.$http.post('/api/public/v1/my/orders/chkOrder',{order_number:orderNumber})
				
				if(re3.meta.status !== 200) return uni.$showMsg("订单未支付！")
				
				uni.showToast({
					title:"订单支付完成！",
					icon:'success'
				})
				
			},
			showTip(n){
				uni.showToast({
					
					icon:'none',
					title:"请先登录后结算！" + n + "秒之后自动跳转到登录页面",
					// mask给提示框一个透明边框，防止用户点击穿透
					mask:true,
					duration:1500

				})
			},
			// 延迟导航的my页面
			delayNavigate(){
				this.showTip(this.seconds)
				
				this.timer = setInterval(()=>{
					
					this.seconds --
					if(this.seconds <= 0){
							
						clearInterval(this.timer)
					
						uni.switchTab({
							
							url:"/pages/my/my",
							success:() => {
								
								this.updateRedirectInfo({
									// 跳转方式
									openType:'switchTab',
									// 从那个页面跳转过去的
									from:"/pages/cart/cart"
									
								})
								
							}
							
						})
						
						return this.seconds = 3
						
					}
					this.showTip(this.seconds)
					
				},1000)
			}
			
		}

	}
</script>

<style lang="scss">
.my-settle-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 5px;
	font-size: 14px;
	// 固定定位
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: white;
	.radio{
		display: flex;
		align-items: center;
		
	}
	.amount{
		color: #C00000;
	}
	.btn-settle{
		height: 50px;
		min-width: 100px;
		background-color: #C00000;
		color: white;
		line-height: 50px;
		text-align: center;
		padding:0 10px;
	}
	
}
</style>
